<template>
	<div class="twoStageWindow">
		<div class="twoStageWindowTitle">
			<span>
        添加仪器
      </span>
			<!-- tab切换按钮 -->
			<div class="twoStageWindowClose">
				<!--<el-button size="mini" type="primary" @click="submit" >添加仪器</el-button>-->
				<el-button size="mini" type="primary" @click="submit(1)">提交</el-button>
				<el-button size="mini" type="primary" @click="submit(0)">保存</el-button>
				<el-button size="mini" @click="close">取消</el-button>
			</div>
		</div>
		<div class="containercontent" style="height:99%;padding: 20px;">

			<div style="height:99%;">
				<!--表单内容-->
				<div class="form">
					<el-form label-width="120px" :inline="false" class="demo-form-inline " :model="form" :rules="rules" ref="instrumentAddForm">
						<el-row>
							<el-col :span="12">
								<el-form-item label="名称" prop="ename">
									<el-input size="mini" v-model="form.ename" placeholder="请输入内容"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="类别:" prop="equipmentType">
									<el-cascader size="mini" clearable expand-trigger="hover" :show-all-levels="false" filterable :options="equipmentTypeData" :props="props"
									 v-model="equipmentType">
									</el-cascader>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="12">
								<!--{{equipmentType}}-->
								<el-form-item label="规格型号:" prop="model">
									<el-input size="mini" v-model="form.model" placeholder="请输入内容"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="设备编号:" prop="enterCode">
									<el-input size="mini" v-model="form.enterCode" placeholder="请输入内容"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
            <el-row>
              <el-col :span="12">
              	<el-form-item :label="stationName" prop="offices">
              		<el-select v-model="form.offices" placeholder="请选择" size="mini" >
                    <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id" >
              			</el-option>
              		</el-select>
              	</el-form-item>
              </el-col>
              <el-col :span="12">
              	<el-form-item label="分组:" prop="grouping">
              		<el-select v-model="form.grouping" placeholder="请选择" size="mini">
              			<el-option v-for="item in groupSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
              			</el-option>
              		</el-select>
              	</el-form-item>


              	<!--<el-form-item label="出厂日期:" prop="factoryDate">
              		<el-date-picker v-model="form.factoryDate" type="date" size="mini" style="width:100%" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
              		 value-format="yyyy-MM-dd">
              		</el-date-picker>
              	</el-form-item>-->
              </el-col>
            </el-row>
            <el-row>
            	<el-col :span="12">
                  <el-form-item label="仪器负责人:" prop="custodian">
                  	<el-select v-model="form.custodian" placeholder="请选择" size="mini" filterable>
                  		<el-option v-for="item in userData" :key="item.account" :label="item.name" :value="item.account" >
                  		</el-option>
                  	</el-select>
                  </el-form-item>
            	</el-col>
            	<el-col :span="12">
            		<el-form-item label="购买日期:" prop="purchaseDate">
            			<el-date-picker v-model="form.purchaseDate" type="date" size="mini" style="width:100%" placeholder="选择日期" format="yyyy - MM - dd"
            			 value-format="yyyy-MM-dd">
            			</el-date-picker>
            		</el-form-item>
            	</el-col>
            </el-row>

						<el-row>
							<el-col :span="12">
								<el-form-item label="出厂编号:" prop="factory">
									<el-input size="mini" v-model="form.factory" placeholder="请输入内容"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="位置:" prop="location">
									<el-input size="mini" v-model="form.location" placeholder="请输入内容"></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>

							<el-col :span="12">

							</el-col>
              <el-col :span="12">
              	<el-form-item label="制造商:" prop="manufacturer">
              		<el-input size="mini" v-model="form.manufacturer" placeholder="请输入内容"></el-input>
              	</el-form-item>
              	<!--<el-form-item label="价格（万元）:" prop="price">
              		<el-input size="mini" v-model.number="form.price" placeholder="请输入内容"></el-input>
              	</el-form-item>-->
              </el-col>
              <el-col :span="12">
              	<el-form-item label="供应商:" prop="supplier">
              		<el-select v-model="form.supplier" placeholder="请选择" size="mini">
              			<el-option v-for="item in supplierData" :key="item.id" :label="item.name" :value="item.id"  :disabled = "item.status == 0 || item.deleteFlag">
              			</el-option>
              		</el-select>
              	</el-form-item>
              
              </el-col>
						</el-row>
						<el-row>

							
              <el-col :span="12">

              </el-col>
						</el-row>
						<el-row>
							<el-col :span="12">

							</el-col>
							<el-col :span="12">

							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">

							</el-col>
							<el-col :span="12">
								<el-form-item label="" prop="">

								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				form: {
					code: '',
					submitType: 1,
					ename: "",
					enterCode: "",
					equipmentType: '',
					doUseCheck: true,
					model: "",
					factory: "",
					factoryDate: "",
					purchaseDate: "",
					price: "",
					location: "",
					supplier: "",
					manufacturer: "",
					grouping: '',
					status: "2",
					sort: "",
          offices:'ALL',
          custodian:'',
          custodianName:'',
				},
				rules: {
					ename: [{
						required: true,
						type: 'string',
						message: '请填写名称',
						trigger: 'blur'
					},],
					grouping: [{
						required: true,
						type: 'string',
						message: '请选择分组',
						trigger: 'blur'
					},],
          offices:[{
            required: true,
						message: '请选择',
						trigger: 'blur',
          }],
					manufacturer: [{
						required: true,
						type: 'string',
						message: '请填写制造商',
						trigger: 'blur'
					},],
					model: [{
						required: true,
						type: 'string',
						message: '请填写规格型号',
						trigger: 'blur'
					},],
					enterCode: [{
						required: true,
						type: 'string',
						message: '请选择',
						trigger: 'blur'
					},
					],
					equipmentType: [{
						required: true,
						type: 'string',
						message: '请选择',
						trigger: 'blur'
					}],
          custodian: [{
          	required: true,
          	type: 'string',
          	message: '请选择仪器负责人',
          	trigger: 'change'
          }]
					//					doUseCheck:[{required: true,type: 'string', message: '请选择', trigger: 'blur' },],
					//					factoryDate:[{required: true,type: 'string', message: '请选择', trigger: 'blur' },],
					//					purchaseDate:[{required: true,type: 'string', message: '请选择', trigger: 'blur' },],
				},
				equipmentType: [],
				equipmentTypeData: [],
				props: {
					value: 'id',
					label: 'name'
				},
				supplierData:[],
        stationName:"厂站",
        stationList:[],
        selectFlag:true,
        userData:[],

			}
		},
		computed: {
			...mapState(['enableStatus1', 'groupSelect', 'yesorno', 'enableStatus', 'mainEquipType', 'dataSelect', 'unitTableDate', 'ruleSelect'])
		},
		created() {
			this.$store.dispatch('dogetDictionary')
      this.getStaion()
		},
		mounted() {
			this.init()

		},
		methods: {
			init() {
				this.$http({
					apiUrl: 'resource/readSupplierComboList.htm',
					method: 'post',
					params: '',
					isJson: false
				}).then(res=>{
					if(res.code == 0) {
						this.supplierData = res.data
					}
				})
				this.$http({
					apiUrl: 'resource/readMainEquipTypeList.htm',
					method: 'post',
					params: '',
					isJson: false
				}).then(res => {
					if (res.code == 0) {
						this.equipmentTypeData = res.data
					}
				})
        this.$http({
          method: 'post',
          apiUrl: '/resource/readEmployeeByLab.htm',
          params: { name: '' },
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            this.userData = res.data;
          }

        })
			},
      getStaion(){
        this.stationName = this.util.getStationName()
        var stationList = this.util.getStationList()
        this.stationList = [...[{name:'全部',id:'ALL'}],...stationList]
      },

			close() {
				this.$parent.addShow = false
			},
			tabDivMinHeight() {
				return (window.innerHeight - 560)
			},
			submit(submitType) {
				if (this.equipmentType.length === 1) {
					this.form.equipmentType = this.equipmentType[0]
				} else {
					this.form.equipmentType = this.equipmentType[this.equipmentType.length - 1]
				}
				this.form.submitType = submitType
        this.userData.forEach((item) =>{
          if(item.account == this.form.custodian){
            this.form.custodianName = item.name;
          }
        })
				this.$refs.instrumentAddForm.validate((valid) => {
					if (valid) {
						this.$http({
							apiUrl: 'resource/addEquipment.htm',
							method: 'post',
							params: this.form,
						}).then(res => {
							if (res.code == 0) {
								this.$parent.addShow = false
								this.$message({
									showClose: true,
									message: '添加成功！',
									type: 'success'
								})
								this.$parent.init()
							}
						})
					} else {
						return false
					}
				})

			}
		}
	}

</script>

<style scoped>
	.instrument-add {
		position: static;
	}

	.twoStageWindowTitle {
		position: static;
	}

	.tabName {
		display: inline-block;
		cursor: pointer;
		padding: 0px 15px;
		border: 1px solid #b7b7b7;
		border-bottom: none;
		border-radius: 5px 5px 0 0;
		color: #a9a9a9;
	}

	.activeTab {
		color: #409eff;
	}

	.infoitem {
		width: calc(100%/2);
		padding-right: 20px;
	}

	.informationItem {
		width: calc(100% - 113px);
		float: right;
	}

	.el-cascader {
		width: 100%;
	}

	.el-input-number--mini {
		width: 100%;
	}

	.el-select {
		width: 100%;
	}

	.separaterow {
		margin-top: 5px;
	}
</style>
